<template>
  <el-dialog title="选择人员" min-width="670px" :before-close="handlePersonnelClose" :visible.sync="dialogPersonnelVisible"
    custom-class="el-dialog-flex" class="peopleDialogSelect" :close-on-click-modal="false" :close-on-press-escape="false"
    @open="openSelectPersonnel">
    <el-container>
      <!-- 左侧 -->
      <el-aside style="width: 360px;" class='el-box-column el-flex'>
        <el-card class='el-box-column el-flex left-side'>
          <div slot="header" class="clearfix">
            <el-input clearable placeholder="请输入姓名" v-model="searchValue" @keyup.enter.native="searchTabel" @clear="searchClear">
              <el-button slot="append" icon="el-icon-search" @click="searchTabel"></el-button>
            </el-input>
          </div>
          <div class="text item">
            <ul class="text mid-panels">
              <li class="el-box panel" v-for="(val, index) in personList" :key="index" @click="choosePelple(val)">
                <div class="user-avatar">{{val.humanArchName}}</div>
                <div class="listRightPart">
                  <span class="name">{{val.humanArchName}}<span v-if='val.humanArchCode'>/{{val.humanArchCode}}</span></span>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-aside>
      <!-- 右侧 -->
      <el-main class="rightSection">
        <div>
          <div class="count">
            <span>已选择 ({{personDetails.length}})</span>
            <el-button type="text" style="float: right;" @click="removeAll">清除</el-button>
          </div>
          <ul class="mid-panel">
            <li class="el-box" v-for="(val, index) in personDetails" :key="index">
              <div class="user-avatar">{{val.humanArchName}}</div>
              <div class="listRightPart">
                <span class="dept">人员姓名:{{val.humanArchName}}</span>
              </div>
              <i class="el-icon-minus" @click="removeClick(index)"></i>
            </li>
          </ul>
        </div>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer" style="text-align:right;width:100%;display:inline-block;margin-top:10px;">
      <el-button type="primary" @click="handleClick(true)">确定 <i class="el-icon-document-checked el-icon--right"></i></el-button>
      <el-button @click="handleClick(false)">取消 <i class="el-icon-refresh-left"></i></el-button>
    </span>
  </el-dialog>
</template>
<script>
  import {
    Dialog,
    MessageBox,
    Message,
  } from 'element-ui'
  import {
    choosePerson, //人员选择
  } from '@/api/org/peopleArchives/selectPerson.js'
  import {
    archiveList //基本信息
  } from '@/api/org/peopleArchives/informationArchives.js'
  export default {
    props: ['dialogPersonnelVisible'],
    components: {
      'el-dialog': Dialog, // 对话框
    },
    data() {
      return {
        personChange: [],
        activeName: 'first',
        personUserName: '',
        empName: '',
        personName: '',
        searchValue: '', // 树结构上的搜索
        personDetails: [], // 选中人员
        personList: [], // 得到人的列表
      }
    },
    methods: {
      personalInfos() {
        let data = {
          page: 1,
          size: 10000
        }
        archiveList(data).then(res => {
          if (res.data.code == 10000) {
            this.personList = res.data.data.records
          }
        })
      },
      searchTabel() { //人员搜索
        if (this.searchValue && this.searchValue != '/') {
          choosePerson(this.searchValue).then(res => {
            if (res.data.code == 10000) {
              this.personList = res.data.data
            }
          })
        }
      },
      openSelectPersonnel() { //弹框打开
      this.personalInfos()
        this.searchValue = ''
        this.personDetails = []
      },
      searchClear() { //清空搜索
        this.searchValue = ''
        this.personDetails = []
        this.personalInfos()
      },
      choosePelple(data) { //搜索人员点击事件
        this.personDetails = [data]
      },
      handlePersonnelClose() { // 关闭选择人员按钮触发事件
        this.$emit('dialogEmployeesData')
      },
      personChangeTab(value) {},
      handleClick(result) { // 点击选择人员弹框确定/取消事件
        if (!result) {
          this.handlePersonnelClose()
        } else {
          if (this.personDetails.length != 0) {
            this.$emit('dialogEmployeesData', this.personDetails)
          } else {
            this.$emit('dialogEmployeesData')
          }
        }
      },
      removeAll() { // 清除所有选中员工
        this.personDetails = []
      },
      removeClick(index) { // 移除单个选中人员事件
        this.personDetails.splice(index, 1)
      },
    }
  }
</script>
<style lang="scss" scope>
  .peopleDialogSelect {
    .el-dialog__body {
      padding: 10px;
    }
  }

  .left-side {
    .el-card__body {
      overflow: auto;
    }
  }

  .rightSection {
    padding: 0 0 10px 10px;

    .count {
      background: #fafafa;
      padding: 0 15px;
      height: 32px;
      line-height: 32px;
    }

    .mid-panel {
      margin-top: 10px;
      height: 100%;

      li {
        padding: 10px 12px 10px 20px;
        font-size: 12px;
        color: #333333;
        position: relative;

        .user-avatar {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border-radius: 50%;
          color: #ffffff;
          background-color: #81C684;
        }

        .listRightPart {
          display: inline-block;
          padding-left: 10px;
          vertical-align: middle;
          line-height: 40px;

          .dept {
            display: block;
            font-size: 12px;
            color: #9e9e9e;
          }
        }

        .el-icon-minus {
          position: absolute;
          right: 10px;
          top: 28px;
          color: #9e9e9e;
          display: none;
        }

        &:hover {
          cursor: pointer;
          background-color: #f7f7f7;

          .el-icon-minus {
            display: block;
          }
        }
      }
    }
  }

  .mid-panels {
    li {
      padding: 15px 10px 7px;
      font-size: 12px;
      color: #333333;

      .user-avatar {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        color: #ffffff;
        background-color: #81C684;
      }

      .listRightPart {
        display: inline-block;
        padding-left: 10px;
        vertical-align: middle;
        line-height: 40px;

        .name {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          color: #333333;
        }

        .dept {
          font-size: 12px;
          color: #9e9e9e;
        }
      }

      &:hover {
        cursor: pointer;
        background-color: #f7f7f7;
      }
    }

  }
</style>
